<template>
	<div class="left_content">
		<div class="map_wrap">
			<MapEchart></MapEchart>
		</div>
		<div class="center_c padding15">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">团队长排名</span>
				<img src="../assets/img/title_img.png" />
			</div>
			<div class="c_content_wrap">
				<div class="first">
					<div class="circle_wrap">
						1
					</div>
					<div class="company">
						{{Ranking[0]}}
					</div>
				</div>
				<div class="second">
					<div class="company">
						{{Ranking[1]}}
					</div>
					<div class="circle_wrap">
						2
					</div>
				</div>
				<div class="third">
					<div class="circle_wrap">
						3
					</div>
					<div class="company">
						{{Ranking[2]}}
					</div>
				</div>
				<!--<img class="lou1" src="../assets/img/lou1.png" />
				<img class="lou2" src="../assets/img/lou2.png" />
				<img class="lou3" src="../assets/img/lou3.png" />
				<img class="citybg" src="../assets/img/dipan.png" />-->
				<img class="lou1" :src="img1" />
				<img class="lou2" :src="img2" />
				<img class="lou3" :src="img3" />
				<img class="citybg" :src="citybg" />
			</div>
		</div>
	</div>
</template>

<script>
	import MapEchart from './MapEchart.vue'
	import { cityOrUserRanking } from '@/request/api'; // 导入我们的api接口

	export default {
		components: {
			MapEchart
		},
		name: 'left_content',

		data() {
			return {
				Ranking: [],
				img1: require('../assets/img/lou1.png'),
				img2: require('../assets/img/lou2.png'),
				img3: require('../assets/img/lou3.png'),
				citybg: require('../assets/img/dipan.png'),
			}
		},
		created() {
			let that = this;
			that.CityOrUserRanking();
			setInterval(function() {
				that.CityOrUserRanking();
			}, 1000 * 60 * 60*1);
		},
		methods: {
			CityOrUserRanking() {
				let that = this;
				cityOrUserRanking({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.Ranking = res.data;
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.height1 {
		height: 390px;
	}
	
	.map_wrap {
		width: 710px;
		height: 411px;
		margin-bottom: 20px;
	}
	
	.left_content {
		color: #FFFFFF;
		/*width: 540px;*/
	}
	
	.padding15 {
		padding: 15px;
	}
	
	.main_fc {
		color: #00BEFF;
	}
	
	.border_image1 {
		position: absolute;
		left: -1px;
		top: -1px;
	}
	
	.border_image2 {
		position: absolute;
		right: -1px;
		top: -1px;
	}
	
	.border_image3 {
		position: absolute;
		right: -1px;
		bottom: -1px;
	}
	
	.border_image4 {
		position: absolute;
		left: -1px;
		bottom: -1px;
	}
	
	.center_c {
		width: 100%;
		border: 1px solid #00BEFF;
		position: relative;
		box-shadow: 0 0 60px 0px #0080CA inset;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.title_wrap {
		color: #2BFAFF;
		font-size: 18px;
		display: flex;
		align-items: center;
	}
	
	.title_wrap .t_text {
		margin-right: 20px;
	}
	
	.c_content_wrap {
		position: relative;
		height: 333px;
	}
	
	.c_content_wrap .lou1 {
		position: absolute;
		left: 50%;
		top: 70px;
		margin-left: -55px;
		z-index: 10;
	}
	
	.c_content_wrap .lou2 {
		position: absolute;
		left: 50%;
		top: 114px;
		margin-left: -146px;
		z-index: 10;
	}
	
	.c_content_wrap .lou3 {
		position: absolute;
		left: 50%;
		top: 155px;
		margin-left: 63px;
		z-index: 10;
	}
	
	.c_content_wrap .citybg {
		position: absolute;
		bottom: -50px;
		width: 100%;
		/*-webkit-animation: ani 10s linear 1s infinite;*/
		-webkit-animation: scaleDraw 10s ease-in-out infinite;
	}
	
	@keyframes scaleDraw {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}
		25% {
			transform: scale(0.9);
			/*放大1.1倍*/
		}
		50% {
			transform: scale(1);
		}
		75% {
			transform: scale(0.9);
		}
	}
	
	@keyframes ani {
		100% {
			transform: rotateY(40deg);
		}
	}
	
	.first {
		position: absolute;
		top: 20px;
		left: 50%;
		margin-left: -38px;
		display: flex;
		align-items: center;
	}
	
	.second {
		position: absolute;
		top: 65px;
		left: 50%;
		margin-left: -278px;
		display: flex;
		align-items: center;
		width: 200px;
		justify-content: flex-end;
	}
	
	.third {
		position: absolute;
		top: 106px;
		left: 50%;
		margin-left: 66px;
		display: flex;
		align-items: center;
	}
	
	.circle_wrap {
		width: 42px;
		height: 42px;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 12px;
	}
	
	.first .circle_wrap {
		background: url("../assets/img/first_circle.png") no-repeat center center;
		background-size: 100% 100%;
	}
	
	.second .circle_wrap {
		background: url("../assets/img/second_circle.png") no-repeat center center;
		background-size: 100% 100%;
	}
	
	.third .circle_wrap {
		background: url("../assets/img/second_circle.png") no-repeat center center;
		background-size: 100% 100%;
	}
	
	.company {
		font-size: 18px;
		margin-right: 12px;
	}
</style>